<template>
	<view>
		<view class="tabs">
			<u-tabs @click="clickNav" :list="lisTag" lineWidth="30" lineColor="#5288F5" :activeStyle="{
		            color: '#333',
		            fontWeight: 'bold',
		            transform: 'scale(1.08)'
		        }" :inactiveStyle="{
		            color: '#606266',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
		</view>
		<view class="loadstate" v-if="loadstate">
			<u-skeleton rows="4" title loading :animate="true"></u-skeleton>
		</view>
		<view class="content">
			<view class="item" v-for="item in dataList">
				<!-- 这里换成:item="item也可以" -->
				<post class="list" :item="item"></post>
			</view>
		</view>
		<view class="none">
		</view>
		<view class="edit" @click="toEdit">
			<text>+</text>
			<!-- <view class="icon t-icon t-icon-zengjia"></view> -->
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import {
		GetStroage
	} from "@/utils/tool.js"
	import {
		getPostWay,
		getUserAllLikePosts,
		checkToken
	} from "@/api/user.js"
	export default {
		data() {
			return {
				lisTag: [{
					name: "最新",
					type: "publish_date"
				}, {
					name: "热门",
					type: "view_count"
				}],
				loadstate: true,
				urlback: "getLimitPosts",
				dataList: [],
				nowPage: 0,
				stateIndex: 0,
				pageSize: 5,
				likeList: [],
				MsgList: {
					type: "success",
					message: "获取验证码成功"
				},
			};
		},
		onShow() { //每次打开页面都会调用一次，onLoad只加载一次
			console.log("进入community");
			this.init(); //每次进入都要初始化
			this.getLikeData();
			this.getData(this.urlback);
		},
		onReachBottom() {
			console.log("到底部了");
			this.nowPage++;
			this.stateIndex = this.nowPage * this.pageSize;
			this.getData(this.urlback);
		},
		methods: {
			init() { //初始化
				this.dataList = [];
				this.nowPage = 0;
				this.stateIndex = 0;
				this.pageSize = 5;
			},
			fillMsg(type, msg) { //提示消息的赋值
				this.MsgList.type = type;
				this.MsgList.message = msg;
				this.$refs.uToast.show({
					...this.MsgList
				})
			},
			//从数据库中获取信息
			getData(urlback) {
				getPostWay({
					data: {
						startIndex: this.stateIndex,
						pageSize: this.pageSize
					},
					urlBack: urlback
				}).then(res => {
					console.log("请求API接口【/user/" + this.urlback + "】", res);
					// console.log("this.likeList:", this.likeList);
					for (let index = 0; index < res.data.length; index++) {
						res.data[index].picsUrl = JSON.parse(res.data[index].picsUrl); //解析成JSON
						res.data[index].like = false; //初始化是false
						for (let i = 0; i < this.likeList.length; i++) { //注意数组越界艹
							// res.data[index].like = false;
							if (res.data[index].id == this.likeList[i].postid) {
								res.data[index].like = true;
							}
						}
						// console.log("图片路径:", res.data[index].picsUrl);
					}
					this.dataList = [...this.dataList, ...res.data]; //ES6写法
					this.loadstate = false;
					// console.log("dataList:", this.dataList);
				})
			},
			getLikeData() {
				uni.getStorage({
					key: "userInfo",
					success: (res) => {
						// console.log("缓存数据:", res.data);
						getUserAllLikePosts({
							id: res.data.id
						}).then(ans => {
							console.log("请求API接口【/user/getUserAllLikePosts】", ans);
							this.likeList = ans.data;
							// console.log("this.likeList:", this.likeList);
						})
					}
				})
			},
			clickNav(e) {
				// console.log(e)
				this.loadstate = true; //加载动画开启
				this.urlback = (e.index == 0 ? "getLimitPosts" : "getLimitHotPosts");
				this.init(); //重置
				this.getData(this.urlback);
			},
			toEdit() {
				//token验证
				let token = GetStroage("token");
				if (token) {
					checkToken({
						Token: token
					}).then(res => {
						console.log("请求API接口【/user/checkToken】", res);
						if (res.data.result == false) {
							this.fillMsg("error", "身份过期/异常，请重新登录！");
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							}, 1500)
						} else {
							uni.navigateTo({
								url: "/pages_community/edit/edit"
							})
						}
					})
				} else {
					this.fillMsg("error", "请先登录！");
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}, 1500)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-image: url("/static/userbackground.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.tabs {
		margin-bottom: 30rpx;
		// position: fixed; //吸顶效果
		// top: var(--window-top);
		// z-index: 10;
		// background-color: #fff;
	}

	.loadstate {

		padding: 30rpx;
	}

	.content {

		// background-color: #5288F5;
		.item {
			padding: 10rpx 20rpx;

			.list {
				border-radius: 15rpx;
				background-color: white;
				box-shadow: 20 10 10 10 rgba(0, 0, 0, 0.8);
			}
		}
	}

	.none {
		height: 100rpx;
		// background-color: #000000;
	}

	.edit {
		display: flex;
		align-items: center; //垂直居中
		justify-content: center; //水平居中
		background-color: #5288F5;
		position: fixed;
		z-index: 100;
		bottom: 100rpx;
		right: 30rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		box-shadow: 0 0 20rpx rgba(82, 136, 254, 0.8);
		font-size: 120rpx;

		text {
			color: white;
		}

		// .icon {
		// 	//对icon很关键
		// 	// padding: 20rpx;
		// 	width: 100rpx;
		// 	height: 100rpx;
		// }

	}
</style>
